<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="application"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单管理</title>
</head>
<body>
	<button class="layui-btn bt_add">添加顶级目录</button>
	<input type="hidden" id="refresh">
	<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>

	<script type="text/javascript">
			layui.config({
				base: '${ctx}/static/js/',
			})
			layui.use(['treeTable','layer','code','form'],function(){
				var o = layui.$,
					$ = layui.$,
					form = layui.form,
					layer = layui.layer,
					treeTable = layui.treeTable;
				// 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
				var	re = treeTable.render({
					elem: '#tree-table',
					url : '${ctx}/menu/page',
					icon_key: 'menuname',
					end: function(e){
						form.render();
					},
					cols: [
						{
							key: 'menuname',
							title: '菜单名称',
						},
						{
							key: 'id',
							title: '菜单ID',
							align: 'center',
						},
						{
							key: 'pid',
							title: '父菜单ID',
							align: 'center',
						},
						{
							key: 'menutype',
							title: '菜单类型',
							align: 'center',
						},{
							key: 'permission',
							title : '权限标识符'
						},{
							key: 'icon',
							title: '菜单图标',
							align: 'center',
						},
						{
							key: 'url',
							title: '跳转地址',
							align: 'center',
						},
						{
							key: 'method',
							title: '回调方法',
							align: 'center',
						},
						{
							key: 'seq',
							title: '序号',
							align: 'center',
						},
						{
							title: '操作',
							align: 'center',
							template: function(item){
								return  '<button class="layui-btn" lay-filter="add">添加</button>'+
										'<button class="layui-btn layui-btn-warm bt_update" lay-filter="update">修改</button>'+
										'<button class="layui-btn layui-btn-danger bt_delete" lay-filter="delete">删除</button>';
							}
						}
					]
				});
				
				//添加顶级目录
				$('.bt_add').click(function(){
					layer.open({
					      type: 2,
					      title: '添加',
					      shadeClose: true,
					      shade: false,
					      maxmin: true, //开启最大化最小化按钮
					      area: ['893px', '600px'],
					      content: '${ctx}/menu/menu_addParentPage'
				    });
				})
				
				//添加
				treeTable.on('tree(add)',function(data){
					console.log(data);
					console.log(data.item.id);
					//layer.msg(JSON.stringify(data));
					layer.open({
					      type: 2,
					      title: '添加',
					      shadeClose: true,
					      shade: false,
					      maxmin: true, //开启最大化最小化按钮
					      area: ['893px', '600px'],
					      content: '${ctx}/menu/menu_addPage?pid='+data.item.id
				    });
				})
				
				//修改
				treeTable.on('tree(update)',function(data){
					var data = $.param(data.item);
					layer.open({
					      type: 2,
					      title: '修改',
					      shadeClose: true,
					      shade: false,
					      maxmin: true, //开启最大化最小化按钮
					      area: ['893px', '600px'],
					      content: '${ctx}/menu/menu_updatePage?'+data
				    });
				})
				
				
				//删除
				treeTable.on('tree(delete)',function(data){
					var id = data.item.id;
					$.ajax({
					    type: "POST",
					    url: '${ctx}/menu/delete',
					    contentType : "application/json",
					    dataType: 'json',  
					    data: JSON.stringify(id),  
					    success: function(e){
					    	if (e == "") {
								layer.msg('删除成功', {icon: 1});		//高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
								treeTable.render(re);
							} else {
								layer.msg(e, {icon: 2});
							}
					    },  
					    error: function(res){
					    	layer.msg("未知异常", {icon: 2});
					    }  
					});
				})

				//刷新
				$('#refresh').click(function (){
					treeTable.render(re);
					treeTable.openAll(re);
				})
				
				//展开全部
				treeTable.openAll(re);
			})
	</script>
</body>
</html>